<template>
  <button v-show="!showMsg" @click="showMsg = true">显示对话框</button>
  <teleport to="body">
    <div v-if="showMsg" class="mask">
      <div class="dialog">
        <h3 class="title">{{title}}</h3>
        <p>{{msg}}</p>
        <button @click="showMsg = false" class="close">关闭</button>
      </div>
    </div>
  </teleport>
</template>

<script>
import {ref} from 'vue'

export default {
  name: 'Dialog',
  props: {
    title: String,
    msg: String
  },
  setup() {
    let showMsg = ref(false)

    return {showMsg}
  },
}
</script>

<style scoped>

  .mask {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.3);
  }

  .dialog {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 400px;
    height: 140px;

    text-align: center;
    background-color: #efe;

    border-radius: 5px;
    margin: 1px 6px 2px 6px;
  }

  .title {
    background-color: cornflowerblue;
  }

  .close {
    width: 88px;
  }

</style>